<!--
 * @Author: ChunLai
 * @Date: 2023-08-14 18:30:08
 * @LastEditTime: 2025-09-05 08:55:25
 * @Description: 万能问卷
 * @FilePath: \02.bldinsure\src\views\omnipotent\questionnaire.vue
-->
<template>
  <div class="question_naire">
    <div id="top"></div>
    <AssessStatus
      :msg="`您的分数[ ${totalCore} ]分 ，风险承受能力类型[ ${getResType} ] ，评估意见[ 您的${getResSuggest} ]`"
      v-if="isCount"
    />

    <!-- 告知提示 -->
    <div class="pd-10-14 bg-fff">
      <p class="p-title" v-html="headLine"></p>
      <span class="line1"></span>
      <p class="lh-15 ti-2" v-html="tip1"></p>
    </div>
    <div class="pd-10-14 lh-15 boder-bt mt10 bg-fff" v-html="tip2"></div>
    <div :class="{ disabledForm: disabledEdit }">
      <template v-for="(item, index) in questionList">
        <div class="model-box bg-fff mt10" v-if="index != 0" :key="index">
          <p>{{ item.title }}</p>
          <div class="ask-box">
            <span
              :class="{ active: item.value === ele.value }"
              v-for="ele in item.asks"
              :key="ele.label"
              @click="handleClick(index, ele.value)"
            >
              {{ ele.value + "." + ele.label }}
            </span>
          </div>
        </div>
      </template>
    </div>

    <FooterBtns
      btnNum="2"
      leftText="结果评估"
      @saveField="countRes"
      rightText="提交问卷"
      @saveForm="nextStep"
    ></FooterBtns>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import AssessStatus from "./components/AssessStatus";
export default {
  name: "QuestionnaireIndex",
  data() {
    return {
      isCount: false,
      questionList: [],
      resultList: [],
      tip1: "",
      tip2: "",
      headLine: "",
    };
  },
  components: { AssessStatus },
  computed: {
    ...mapGetters({
      omnipotentAccount: "page/omnipotentAccount",
    }),
    isOmnipAccount() {
      let res = false;
      if (
        this.omnipotentAccount.length > 0 &&
        this.omnipotentAccount.includes(this.mainRiskCode)
      ) {
        res = true;
      }
      return res;
    },
    askFinish() {
      let res = false;
      for (let i = 0; i < this.questionList.length; i++) {
        if (this.questionList[i].cores === 0) {
          res = false;
          return false;
        } else {
          res = true;
        }
      }
      return res;
    },
    totalCore() {
      let res = 0;
      const len = this.questionList.length;
      for (let i = 0; i < len; i++) {
        const item = this.questionList[i];
        res += (item.cores || 0) * 1;
      }
      return res;
    },
    getResObj() {
      let res = {};
      const obj = this.resultList.find(
        (item) =>
          this.totalCore >= item.minRange && this.totalCore <= item.maxRange
      );
      if (obj) {
        res = obj;
      }
      return res;
    },
    getResSuggest() {
      let res = "";
      if (this.getResObj.suggest) {
        res = this.getResObj.suggest;
      }
      return res;
    },
    getResType() {
      let res = "";
      if (this.getResObj.type) {
        res = this.getResObj.type;
      }
      return res;
    },
  },
  watch: {},
  created() {
    this.questionList = [];
    this.$store.dispatch("json/getNoticeJson", "questionnaire").then((res) => {
      const { DataList, resultList, tip1, tip2, headLine } = res;
      this.resultList = resultList;
      this.tip1 = tip1;
      this.tip2 = tip2;
      this.headLine = headLine;
      this.dataEcho(DataList);
    });
  },
  mounted() {},
  methods: {
    dataEcho(DataList) {
      this.$store
        .dispatch("apis/comAdminApiRequest", {
          apiParams: {
            ...this.apiComParams,
            type: "5",
          },
          apiName: "queryImparts",
        })
        .then((data) => {
          if (data.code == "1" && data.imparts.length > 0) {
            this.reBackForApi(DataList, data.imparts);
            return;
          }
          this.questionList = DataList;
        });
    },
    // 已填写数据回显
    reBackForApi(initDatas, resDatas) {
      const len = initDatas.length;
      for (let i = 0; i < len; i++) {
        const item = initDatas[i];
        if (item.asks) {
          const fdobj = resDatas.find(
            (ele) => ele.impartCode == item.impartCode
          );
          if (fdobj) {
            const arr = fdobj.impartRemark.split(",");
            item.value = arr[0];
            item.cores = arr[1];
          }
        }
      }
      this.questionList = initDatas;
    },
    handleClick(idx, val) {
      this.$set(this.questionList[idx], "value", val);
      const core = val === "a" ? 1 : 2;
      this.$set(this.questionList[idx], "cores", core);
      this.$set(this.questionList[idx], "impartContent");
      this.$set(this.questionList[idx], "impartRemark");
    },
    countRes() {
      if (!this.askFinish)
        return this.$msAlert("请完成问卷里所有题目的答案选择");
      this.isCount = true;
      this.toViewEl();
    },
    toViewEl() {
      document
        .getElementById("top")
        .scrollIntoView({ behavior: "smooth", block: "center" });
    },
    nextStep() {
      if (this.disabledEdit) return this.forbidChange();
      // 前端告知要有万能问卷，评分低于15分不能投保
      if (!this.askFinish || !this.isCount)
        return this.$msAlert(`请先完成"结果评估"`);
      if (this.totalCore < 15) return this.$msAlert(`评分低于15分不能投保`);
      // 接口数据拼接
      let apiList = [];
      const len = this.questionList.length;
      for (let i = 0; i < len; i++) {
        const item = this.questionList[i];
        const obj = {
          impartCode: item.impartCode,
          impartVersion: item.impartVersion,
          impartContent: "",
          impartRemark: "",
        };
        if (i === 0) {
          obj.impartContent = item.impartContent;
          obj.impartRemark = `${this.totalCore},${this.getResType},${this.getResSuggest}`;
        } else {
          obj.impartContent = `${
            item.title +
            "a." +
            item.asks[0].label +
            "；b." +
            item.asks[1].label +
            "。得分____"
          }`;
          obj.impartRemark = `${item.value},${item.cores}`;
        }
        apiList.push(obj);
      }
      this.submitToApi(apiList);
    },
    submitToApi(quelist) {
      let params = {
        ...this.apiComParams,
        type: "5",
        imparts: quelist,
      };
      this.$store
        .dispatch("apis/comAdminApiRequest", {
          apiParams: params,
          apiName: "saveImparts",
          toast: true,
        })
        .then((data) => {
          if (this.isOmnipAccount) {
            this.$router.push("/associate");
          } else {
            this.$router.push("/count");
          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
.question_naire {
  // background-color: #fff;
  padding-bottom: 100px;
}
.block-gray {
  width: 100%;
  height: 6px;
  background-color: #f4f4f4;
}
.line1 {
  display: inline-block;
  width: 100%;
  height: 5px;
  border-top: 1px solid #4f77ab;
  border-bottom: 2px solid #4f77ab;
}

.p-title {
  color: #000;
  line-height: 2;
  text-align: center;
}
.pd-10-14 {
  padding: 10px 14px;
}
.lh-15 {
  line-height: 1.5;
  color: #999;
}
.ti-2 {
  text-indent: 2em;
}
.boder-bt {
  border-bottom: 1px solid #efefef;
}
.model-box {
  padding: 0 14px;
  p {
    line-height: 2;
  }
  .ask-box {
    display: flex;
    flex-direction: column;
    span {
      display: flex;
      border: 1px solid #dddddd;
      border-radius: 6px;
      line-height: 1;
      padding: 6px 10px;
      margin-bottom: 10px;
      align-self: baseline;
      // &:not(:last-child) {
      // 	margin-bottom: 10px;
      // }
      &.active {
        color: #b40002;
        border-color: #b40002;
        background-color: #fbe5e7;
      }
    }
  }
}
</style>
